<template>

  <div class="item" :class="{active:isActive}" @click="handlerClick">
    <slot>
      <!--插槽
        外部直接在innerHTML中写
       -->
    </slot>
  </div>
</template>

<script>
export default {
  name: "Item",
  props: {
    isActive: {
      type: Boolean, //约束传入类型
      // require:true,//约束该属性必须传入
      default: false,//默认值
    },
  },
  methods: {
    handlerClick() {
      //我只知道被点击了，却不知道应该做什么,此时应该通知父元素
      //发给父组件事件active 参数为123......
      this.$emit("active");
      //父组件可以直接用 @active='function'处理事件
    }
  }
}
</script>

<style scoped>
/*scope 局部样式*/
.item:hover {
  /*鼠标移入*/
  background: #e7e7e7;
}

.item {
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: center;
  /*缓慢渲染*/
  transition: 0.2s;
}

.active {
  background: #e7e7e7;
}
</style>